<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<!-- 			<Button type="error" @click="newUser">新增</Button>
			<Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
			<Button type="primary" shape="circle" @click="search" icon="ios-search">查询</Button> -->
			<!-- <Col span="4">
			<Button class="m-2" type="error" @click="newUser">新增</Button>
			</Col> -->

			<Col span="4">
			<Input :class="'w-75 m-2'" v-model="searchTrainerId" placeholder="请输入教练ID" />
			</Col>
            <!-- <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker> -->
            <Col span="8">
            <el-date-picker v-model="params.date" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                @change="search()">
               </el-date-picker>
			</Col>

			<Col span="4">
			<Input :class="'w-75 m-2'" v-model="searchAmount" placeholder="请输入金额" />
			</Col>
            <Col span="4">
            <Input :class="'w-75 m-2'" v-model="searchStatu" placeholder="请输入状态" />
            </Col>

			<!-- <Col span="4">
			<Radio-group v-model="searchSex">
				<Radio label="true">男</Radio>
				<Radio label="false">女</Radio>
			</Radio-group>
			</Col> -->
			<Col span="4">
			<Button class="m-2" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
			</Col>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<!-- <template slot-scope="{ row, index }" slot="sex">
					<span v-if="row.sex">男</span>
					<span v-else>女</span>
				</template> -->



				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px"
						@click="show(row.acountId)">详细</Button>
					<!-- <Button type="error" size="small" @click="remove(row.trainerId)">删除</Button> -->
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
                params:{
                    date: '',
                    startDate:'',
                    endDate:''
                },
				// searchName: "",
				// searchPhone: "",
                searchTrainerId: null,
				// searchStartDate: "",
				// searchEndDate: "",
                searchAmount: "",
                searchStatu: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [
                        {
                        	title: "结算编号",
                        	key: "acountId",
                        	width: 150
                        },
                        {
							title: "教练编号",
							key: "trainerId",
							width: 150
						},
						
						{
							title: "开始日期",
							key: "startDate",
							width: 200
						},

						{
							title: "结束日期",
							key: "endDate",
							width: 200
						},
						{
							title: "结算总额",
							key: 'amount',
							width: 200
						},
                        {
                        	title: "状态",
                        	key: 'statu',
                        	width: 200
                        },
						{
							title: "操作",
							slot: 'action'
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search();
			},
			// newUser: function() {
			// 	this.$router.push({
			// 		name: "trainer_new"
			// 	});
			// },
            
			show: function(acountId) {
				this.$router.push({
					name: 'trainer_account',
					params: {
						acountId
					}
				});
			},
			update(acountId) {
				this.$router.push({
					name: "trainer_update",
					params: {
						acountId 
					}
				});
			},
			// remove: function(trainerId) {

			// 	this.message.confirm({
			// 		title: "删除提示",
			// 		content: "即将删除该体训师，确定吗？",
			// 		onOk: () => {
			// 			this.http.delete({
			// 				url: "/trainer/info",
			// 				param: {
			// 					trainerId
			// 				}
			// 			}).then(data => {

			// 				this.search();
			// 			});
			// 		},
			// 		onCancel: () => {
			// 			this.message.info('操作已取消');
			// 		}
			// 	});
			// },
			search: function() {
				let self = this;
                let time = self.params.date.toString();
                self.params.startDate = time.substring(0,19);
                self.params.endDate = time.substring(20);
				this.http.get({
					url: "/trainer-account/list",
					param: {
						currentPage: this.$data.tableInfo.currentPage,
						trainerId: this.$data.searchTrainerId,
                        startDate: this.$data.params.startDate,
                        endDate: this.$data.params.endDate,
                        amount: this.$data.searchAmount,
                        statu: this.$data.searchStatu
						// acountId: this.$data.searchId,
						// ic: this.$data.searchIc,
						// sex: this.$data.searchSex,
					}
				}).then(data => {
					self.$data.tableInfo.currentPage = data.currentPage;
					self.$data.tableInfo.total = data.total;
					self.$data.tableInfo.pageSize = data.size;
					self.$data.tableInfo.data = data.records;


				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}

	}
</script>

<style>

</style>
